<template>
	<view class="bank-box">
		<view class="bank-title">当前支持以下银行</view>
		<view class="bank-list">
			<view class="bank-item" v-for="(item,index) in dataList" :key="index" @tap="selectBank(item)">
				<image class="bank-icon" :src="item.bankBranchImage" mode="aspectFit"></image>
				<text class="bank-name">{{item.bankBranchName}}</text>
				<image class="bank-right-icon" src="/static/right_gray_icon.png" mode="aspectFit"></image>
				<view class="bank-line"></view>
			</view>
		</view>
	</view>
</template>

<script setup>
	
	import { onLoad,onPullDownRefresh } from '@dcloudio/uni-app'
	import { ref } from 'vue'
	import { useFormStore } from '@/stores'
	import { getBankList } from '@/config/api.js'
	const dataList = ref()
	const formStore = useFormStore()
	//选择银行
	const selectBank = (item)=> {
		formStore.branchBankName = item.bankBranchName
		formStore.bankBranchNo = item.bankBranchNo
		formStore.bankNo = ''
		formStore.bankName = ''
		uni.navigateBack()
	}
	//获取开户银行列表
	const getBankListData = ()=>{
		getBankList().then(res=>{
			dataList.value = res.result
			uni.stopPullDownRefresh()
		}).catch((error)=>{
			uni.stopPullDownRefresh()
		})
	}
	///页面加载时
	onLoad(()=>{
		getBankListData()
	})
	onPullDownRefresh(()=>{
		getBankListData()
	})
	
</script>

<style lang="scss" scoped>
.bank-box{
	font-size: 28rpx;
	color: $xh-title-color;
	position: relative;
	.bank-title{
		color: $xh-subtitle-color;
		padding: 0 30rpx;
		height: 100rpx;
		line-height: 100rpx;
		background-color: $xh-bg-color;
	}
	.bank-list{
		background-color: white;
		.bank-item{
			display: flex;
			align-items: center;
			padding: 20rpx 30rpx;
			position: relative;
			.bank-icon{
				width: 64rpx;
				height: 64rpx;
				flex-shrink: 0;
				margin-left: 20rpx;
			}
			.bank-right-icon{
				width: 24rpx;
				height: 24rpx;
				margin-left: auto;
				flex-shrink: 0;
			}
			.bank-name{
				font-size: 28rpx;
				margin-left: 30rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				word-break: break-all;
				display: -webkit-box;
				-webkit-box-orient:vertical;
				-webkit-line-clamp:1;
			}
			.bank-line{
				position: absolute;
				left: 30rpx;
				right: 0;
				bottom: 0;
				height: 1px;
				transform: scaleY(0.5);
				background-color: $xh-line-color;
			}
		}
	}
	
}
</style>
